<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 指定文档类型为HTML5 -->
    <meta charset="UTF-8">
    <!-- 设置网页标题 -->
    <title>员工列表</title>
    <style>
        /* 为整个页面设置默认字体样式 */
        body {
            font-family: Arial, sans-serif;
        }

        /* 表格整体样式，包括宽度、位置、边框等 */
        #empTb {
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse;
            border: 1px solid #ddd;
        }

        /* 表格单元格样式，包括内边距、文本对齐方式等 */
        #empTb th, #empTb td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center; /* 单元格内容居中对齐 */
        }

        /* 表头背景颜色和文字颜色 */
        #empTb th {
            background-color: #409eff; /* 表头背景颜色 */
            color: black; /* 表头文字颜色 */
        }

        /* 偶数行的背景颜色 */
        #empTb tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        /* 搜索容器样式，包括文本对齐和外边距 */
        .search-container {
            text-align: center;
            margin-bottom: 20px;
        }

        /* 分页导航样式，包括文本对齐和外边距 */
        .pagination {
            text-align: center;
            margin-top: 10px;
        }

        /* 分页链接样式，包括内边距、外边距、边框、背景颜色 */
        .pagination a {
            text-decoration: none;
            padding: 8px 15px;
            margin: 0 5px;
            border: 1px solid #ddd;
            background-color: #409eff;
            color: white;
            border-radius: 4px;
        }

        /* 分页链接鼠标悬浮效果 */
        .pagination a:hover {
            background-color: #45a049;
        }

        /* 输入框样式，包括内边距、边框、圆角和宽度 */
        input[type="text"] {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 300px;
        }

        /* 按钮样式，包括内边距、外边距、边框、圆角、背景颜色、文本颜色和鼠标样式 */
        input[type="button"] {
            padding: 10px 20px;
            margin-left: 10px;
            border: none;
            border-radius: 4px;
            background-color: #409eff;
            color: white;
            cursor: pointer;
            font-size: 14px;
        }

        /* 按钮鼠标悬浮效果 */
        input[type="button"]:hover {
            background-color: #45a049;
        }

        /* 添加一个新的类选择器为链接添加样式 */
        .add-emp-link {
            display: inline-block; /* 使链接内部的元素能够显示出来 */
            text-decoration: none; /* 去除下划线 */
            padding: 8px 15px; /* 内边距 */
            margin: 0 5px; /* 外边距 */
            border: 1px solid #ddd; /* 边框 */
            background-color: #409eff; /* 背景颜色 */
            color: white; /* 文本颜色 */
            border-radius: 4px; /* 边框圆角 */
            transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
        }

        .add-emp-link:hover {
            background-color: #45a049; /* 鼠标悬浮时的背景颜色 */
        }

        /* 定义一个新的类选择器为操作链接添加样式 */
        .table-action-link {
            text-decoration: none; /* 去除下划线 */
            padding: 5px 10px; /* 内边距 */
            margin: 0 2px; /* 外边距 */
            border: 1px solid #ddd; /* 边框 */
            background-color: #f8f8f8; /* 背景颜色 */
            color: #333; /* 文本颜色 */
            border-radius: 4px; /* 边框圆角 */
            transition: background-color 0.3s, color 0.3s; /* 背景颜色和文本颜色变化的过渡效果 */
        }

        .table-action-link:hover {
            background-color: #e9e9e9; /* 鼠标悬浮时的背景颜色 */
            color: #000; /* 鼠标悬浮时的文本颜色 */
        }

        /* 可以为删除和修改操作添加不同的背景色以区分 */
        .table-action-link.delete {
            background-color: #ff6666; /* 删除操作的背景色 */
            color: white; /* 删除操作的文本颜色 */
        }

        .table-action-link.delete:hover {
            background-color: #45a049; /* 删除操作鼠标悬浮时的背景色 */
        }

        .table-action-link.edit {
            background-color: #FFFF00; /* 修改操作的背景色 */
        }

        .table-action-link.edit:hover {
            background-color: #45a049; /* 修改操作鼠标悬浮时的背景色 */
        }
    </style>
</head>
<body>
<!-- 搜索框容器，包含一个输入框和一个按钮 -->
<div class="search-container">
    <input type="text" id="ename" placeholder="请输入搜索关键字" size="40">
    <input type="button" id="search" value="搜索">
    <a href="addEmp.html" class="add-emp-link">新增员工</a>
</div>

<!-- 表格容器，初始时只包含表头 -->
<table id="empTb">
    <tr>
        <th>员工编号</th>
        <th>员工姓名</th>
        <th>员工工资</th>
        <th>入职时间</th>
        <th>部门编号</th>
        <th>选择操作</th>
    </tr>
    <!-- 表格数据将通过JavaScript动态生成并插入 -->
</table>

<!-- 分页导航，包含首页、上一页、下一页和最后一页的链接 -->
<div class="pagination">
    <a href="javascript:void(0)" id="first" class="pages">首页</a>
    <a href="javascript:void(0)" id="prev" class="pages">上一页</a>
    <a href="javascript:void(0)" id="next" class="pages">下一页</a>
    <a href="javascript:void(0)" id="last" class="pages">最后一页</a>
</div>

<!-- 引入jQuery库 -->
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<script>
    /**
     * formatDate 函数用于将 JavaScript Date 对象格式化为更易读的格式。
     * @param {Date} date - 要格式化的日期对象。
     * @return {string} 返回格式化后的日期字符串，格式为“年月日”。
     */
    function formatDate(date) {
        // 格式化日期为“年月日”格式
        return date.getFullYear() + '年' +
            ('0' + (date.getMonth() + 1)).slice(-2) + '月' +
            ('0' + date.getDate()).slice(-2) + '日';
    }

    // 定义当前页码变量，默认为1
    var currPage = 1;
    // 定义总页数变量
    var tPages;

    $(function () {
        /**
         * getEmpList 函数负责获取员工列表并渲染到页面上的表格中。
         * @param {number} curr - 当前的页码。
         */
        var getEmpList = function (curr) {
            // 发送 POST 请求到服务器端点'/LPSFS'获取数据
            $.ajax({
                type: 'POST',
                url: '/LPSFS',
                dataType: 'json',
                data: {
                    pageSize: 5, // 每页显示的记录数
                    pageNum: curr || 1, // 当前页码，如果没有提供则默认为第一页
                    ename: $("#ename").val() // 搜索框中的值
                },
                success: function (result) {
                    // 清空当前表格数据，除了表头
                    $("#empTb").find("tr").not(':first').remove();
                    // 遍历返回的员工数据并构建表格行
                    $.each(result.empList, function (index, emp) {
                        var formattedDate = formatDate(new Date(emp.hireDate));
                        // 向表格追加新行，包含员工信息
                        $("#empTb").append(
                            "<tr>" +
                            '<td>' + emp.empId + '</td>' +
                            '<td>' + emp.empName + '</td>' +
                            '<td>' + emp.salary + '</td>' +
                            '<td>' + formattedDate + '</td>' +
                            '<td>' + (emp.dept ? emp.dept.deptId : '') + '</td>' +
                            '<td>' +
                            '<a href="/EDS?empId=' + emp.empId + '" class="table-action-link delete">删除</a>' +
                            '<a href="/empDetail?empId=' + emp.empId + '" class="table-action-link edit">修改</a>' +
                            '</td>' +
                            "</tr>"
                        );
                    });
                    // 更新当前页码和总页数
                    currPage = result.pageNum;
                    tPages = result.totalPages;
                }
            });
        };

        // 为分页链接绑定点击事件，实现分页功能
        $(".pages").click(function (e) {
            e.preventDefault();
            var pageId = $(this).attr("id");
            var newPage = currPage;
            // 根据点击的分页按钮更新新页码
            if (pageId === "first") newPage = 1;
            else if (pageId === "prev") newPage = Math.max(1, currPage - 1);
            else if (pageId === "next") newPage = Math.min(tPages, currPage + 1);
            else if (pageId === "last") newPage = tPages;
            // 使用新的页码重新获取员工列表
            getEmpList(newPage);
        });

        // 为搜索按钮绑定点击事件，实现搜索功能
        $("#search").click(function () {
            // 搜索时重置页码为第一页并获取员工列表
            getEmpList(1);
        });


        // 在文档加载完成后，初始化并获取第一页的员工列表数据
        getEmpList();
    });
</script>
</body>
</html>